<template>
  <div id="add_menu_id">
    <el-dialog title="新增菜单" :visible.sync="isShow.flag">
      <el-form
        ref="Form"
        :model="Form"
        :rules="rules"
        label-width="80px"
        style="text-align: left"
      >
        <el-form-item label="上级菜单">
          <el-select v-model="Form.pid" placeholder="请选择活动区域">
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              :label="m.title"
              :value="m.id"
              v-for="m in menuList"
              :key="m.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单类型">
          <el-radio-group v-model="Form.type">
            <el-radio :label="2">菜单</el-radio>
            <el-radio :label="1">目录</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="Form.title"></el-input>
        </el-form-item>

        <el-form-item
          label="菜单地址"
          prop="name"
          v-if="Form.type !== 1 ? true : false"
        >
          <el-input v-model="Form.url"></el-input>
        </el-form-item>

        <el-form-item
          label="菜单图标"
          prop="name"
          v-if="Form.type !== 2 ? true : false"
        >
          <el-input v-model="Form.icon"></el-input>
        </el-form-item>

        <el-form-item label="菜单状态">
          <el-radio-group v-model="Form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["isShow", "menuList"],
  data() {
    return {
      Form: {
        title: "",
        url: "",
        type: 1,
        icon: "",
        status: 1,
        pid: 0,
        id:0,
      },
      rules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    setFome(obj){
      this.Form = {...obj}
    },
    submit() {
      var url = ''
      if(this.Form.id === 0){
        url = '/api/menuadd'
      }else{
        url = '/api/menuedit'
      }
      this.$http.post(url,this.Form).then((res) => {
        if (res.code === 200) {
          this.Form = {
            title: "",
            url: "",
            type: 1,
            icon: "",
            status: 1,
            pid: 0,
            id:0,
          };
          this.isShow.flag = false;
          this.$emit("reload_list");
        }
      });
    },
  },
};
</script>

<style>
</style>